<!DOCTYPE html>
<html>
	<head>
		<title>左侧菜单</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			.menu_list {
				width: 206px;
				margin: 0;
			}

			* {
				/* *表示全局声明div的边框外部和元素距离为0 */
				padding: 0;
				margin: 0;
			}

			.menu_head {
				height: 47px;
				line-height: 47px;
				padding-left: 38px;
				font-size: 14px;
				color: #525252;
				cursor: pointer;
				border: 1px solid #f1f1f1;
				position: relative;
				margin: 0px;
				font-weight: bold;
				background: #51a9f18c;
			}

			.menu_list .current {
				background: #51a9f18c;
			}

			.menu_nva {
				line-height: 38px;
				border-left: 1px solid #51a9f18c;
				backguound: #fff;
				border-right: 1px solid #51a9f18c;
			}

			.menu_nva a {
				display: block;
				/* 让对象成为块级元素 */
				height: 38px;
				line-height: 38px;
				padding-left: 38px;
				color: #777777;
				background: #fff;
				text-decoration: none;
				border-bottom: 1px solid #51a9f18c;
			}

			.menu_nva a:hover {
				text-decoration: none;
			}

			a:hover {
				color: #ffffff;
				background-color: #1B6D85;
			}
		</style>
	</head>

	<body>
		<img src="../img/side_top.gif" />
		<div id="firstpaneDiv" class="menu_list">
			<h3 class="menu_head current">人员信息管理</h3>
			<div style="display:block" class="menu_nva">
				<a href="02m.html" target="right">人员信息</a><!-- target 属性规定在何处打开链接文档 -->
				<a href="ryxx.html" target="right">添加信息</a>
				<a href="#">启用信息</a>
			</div>
			<h3 class="menu_head">出勤管理</h3>
			<div style="display:none" class="menu_nva">
				<a href="#">出勤情况</a>
				<a href="#">每月出勤</a>
				<a href="#">当日出勤</a>
			</div>
			<h3 class="menu_head">系统管理</h3>
			<div style="display:none" class="menu_nva">
				<a href="#">角色管理</a>
				<a href="#">权限管理</a>
				<a href="#">角色分配</a>
				<a href="#">登录日志</a>
				<a href="#">系统配置</a>
			</div>
			<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
			<script>
				$(document).ready(function() {
					$("#firstpaneDiv .menu_nva:eq(0)").show();
					$("#firstpaneDiv h3.menu_head").click(function() {
						$(this).addClass("current").next("div.menu_nva").slideToggle(200).siblings("div.menu_nva").slideUp("slow");
						$(this).siblings().removeClass("current");
					});
					$("#secondpane .menu_nva:eq(0)").show();
					$("#secondpane h3.menu_head").mouseover(function() {
						$(this).addClass("current").next("div.menu_nva").slideDown(400).siblings("div.menu_nva").slideUp("slow");
						$(this).siblings().removeClass("current");
					});
				});
			</script>
	</body>
</html>
